/* 主容器 */
.container {
	height: 100vh;
	background: #000;
	overflow: hidden;
	position: relative;
}

/* 头部导航 */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
	backdrop-filter: blur(10px);
}

.navbar {
	background: transparent !important;
	color: #fff !important;
}

/* 可横向滑动的 Tab 栏 */
.tabBar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 24px;
	width: 100%;
	color: #fff;
	padding: 0 12px;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none; /* IE/Edge */
	scrollbar-width: none; /* Firefox */
}
.tabBar::-webkit-scrollbar { display: none; }

.tabItem {
	font-size: 16px;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.3s;
	flex: 0 0 auto; /* 不换行不收缩 */
}

.activeTab {
	opacity: 1;
	position: relative;
}

.activeTab::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	width: 24px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

/* 视频容器 */
.videoContainer {
	width: 100%;
	height: 100vh;
	will-change: transform;
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	user-select: none;
	touch-action: pan-y;
}

.videoItem {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

/* 视频播放器 */
.video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

/* 全局进度条：固定底部，铺满宽度，不遮挡交互（高度仅24px） */
.globalProgressBar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	padding: 8px 12px 12px;
	box-sizing: border-box;
	z-index: 120; /* 高于右侧按钮和文案 */
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}

.progressTrack {
	position: relative;
	width: 100%;
	height: 4px;
	background: rgba(255,255,255,0.25);
	border-radius: 999px;
	overflow: visible;
}

.progressFill {
	height: 100%;
	background: #fff;
	border-radius: 999px 0 0 999px;
	width: 0;
}

.progressThumb {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* 加载占位符 */
.loadingPlaceholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	z-index: 5;
}

.loadingSpinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255,255,255,0.3);
	border-top: 3px solid #fff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 12px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 右侧操作按钮 */
.rightActions {
	position: absolute;
	right: 12px;
	bottom: 120px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 10;
}

.actionItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}

.actionIcon {
	font-size: 28px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.1);
	border-radius: 50%;
	backdrop-filter: blur(10px);
}

.actionText {
	font-size: 12px;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* 底部信息 */
.bottomInfo {
	position: absolute;
	left: 12px;
	right: 80px;
	bottom: 20px;
	z-index: 10;
}

.authorInfo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.authorAvatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255,255,255,0.3);
}

.authorAvatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.authorName {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.followBtn {
	background: #ff4757;
	color: #fff;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 16px;
	cursor: pointer;
	margin-left: auto;
}

.videoCaption {
	color: #fff;
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 8px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
	word-break: break-word;
}

.musicInfo {
	color: #fff;
	font-size: 12px;
	opacity: 0.8;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* 滑动指示器（保留） */
.swipeIndicator {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	border-radius: 20px;
	padding: 16px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 1000;
	backdrop-filter: blur(10px);
	animation: swipeIndicatorFade 0.2s ease-out;
}

.swipeArrow {
	font-size: 24px;
	color: #fff;
}

.swipeText {
	font-size: 14px;
	color: #fff;
	font-weight: 500;
}

@keyframes swipeIndicatorFade {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 评论抽屉样式：白色主题 */
.commentsMask{
	position: fixed;
	inset: 0;
	background: transparent; /* 页面不再变暗 */
	z-index: 200;
	display: flex;
	align-items: flex-end;
	pointer-events: auto; /* 允许点击遮罩关闭 */
}
.commentsPanel{
	pointer-events: auto;
	width: 100%;
	height: 55vh;
	background: #fff;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	color: #222;
	display: flex;
	flex-direction: column;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.commentsHeader{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	font-size: 15px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	color: #111;
}
.commentsClose{
	font-size: 18px;
	line-height: 1;
	opacity: .7;
	cursor: pointer;
}
.commentsBody{
	flex: 1;
	overflow-y: auto;
	padding: 10px 14px 16px;
	background: #fff;
}
.commentsLoading, .commentsEmpty{
	text-align: center;
	color: #888;
	margin-top: 18px;
	font-size: 13px;
}
.commentsList{ display: flex; flex-direction: column; gap: 10px; }
.commentItem{ display: flex; gap: 8px; align-items: flex-start; }
.commentAvatar{ width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.commentAvatar img{ width: 100%; height: 100%; object-fit: cover; }
.commentContent{ flex: 1; color: #333; font-size: 13px; line-height: 1.6; background: #f6f7f8; border: 1px solid #f0f1f2; padding: 8px 12px; border-radius: 12px; }

/* 评论底部输入区 */
.commentsFooter{
	border-top: 1px solid rgba(0,0,0,0.06);
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
}
.commentsInput{
	flex: 1;
	height: 36px;
	border-radius: 18px;
	border: 1px solid #e5e6eb;
	background: #f7f8fa;
	padding: 0 14px;
	font-size: 14px;
	outline: none;
}
.sendBtn{
	min-width: 64px;
	height: 36px;
	border-radius: 18px;
	border: none;
	background: #1677ff;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}
.sendBtn:disabled{
	opacity: .6;
	cursor: not-allowed;
}